<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">

    <meta name="description" content="瓦尔哈拉大陆">
    <meta name="keywords" content="登陆">

    <title>瓦尔哈拉大陆</title>

    <!-- CSS -->
    <link type="text/css" href="/static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}"
          rel="stylesheet">
    <link type="text/css" href="/static/css/form.css" th:href="@{/css/form.css}" rel="stylesheet">
    <link type="text/css" href="/static/css/style.css" th:href="@{/css/style.css}" rel="stylesheet">
    <link type="text/css" href="/static/css/animate.css" th:href="@{/css/animate.css}" rel="stylesheet">
    <link type="text/css" href="/static/css/generics.css" th:href="@{/css/generics.css}" rel="stylesheet">
</head>
<body id="skin-blur-violate">
<section id="login">
    <header>
        <h1>ICE ODIN</h1>
        <p>欢迎来到瓦尔哈拉大陆，众神殿堂等待你的加盟！</p>
    </header>

    <div class="clearfix"></div>

    <!-- Login -->
    <form class="box tile animated active" id="box-login" th:action="@{/login}" method="post">
        <h2 class="m-t-0 m-b-15" th:text="#{login.btn}">Login</h2>
        <p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
        <input type="text" name="username" class="login-control m-b-10" placeholder="Username"
               th:placeholder="#{login.username}">
        <input type="password" name="password" class="login-control" placeholder="Password"
               th:placeholder="#{login.password}">
        <div class="checkbox m-b-20">
            <label>
                <span class="checkableBox"><input type="checkbox"></span>
                <span>[[#{login.remember}]]</span>
            </label>
        </div>
        <button class="btn btn-sm m-r-5" th:text="#{login.btn}">Sign In</button>

        <small>
            <a class="box-switcher" data-switch="box-register" href="" th:text="#{login.unregistered}">Don't have an
                Account?</a> or
            <a class="box-switcher" data-switch="box-reset" href="" th:text="#{login.forgetpwd}">Forgot Password?</a>
        </small>
    </form>

    <!-- Register -->
    <form class="box animated tile" id="box-register">
        <h2 class="m-t-0 m-b-15">注册</h2>
        <input type="text" class="login-control m-b-10" placeholder="Full Name" th:placeholder="全名">
        <input type="text" class="login-control m-b-10" placeholder="Username" th:placeholder="用户名">
        <input type="email" class="login-control m-b-10" placeholder="Email Address" th:placeholder="邮箱地址">
        <input type="password" class="login-control m-b-10" placeholder="Password" th:placeholder="密码">
        <input type="password" class="login-control m-b-20" placeholder="Confirm Password" th:placeholder="确认密码">

        <button class="btn btn-sm m-r-5" th:text="注册">Register</button>

        <small><a class="box-switcher" data-switch="box-login" href="" th:text="已有账户">Already have an Account?</a>
        </small>
    </form>

    <!-- Forgot Password -->
    <form class="box animated tile" id="box-reset">
        <h2 class="m-t-0 m-b-15">重置密码</h2>
        <p>寻找失去的记忆</p>
        <input type="email" class="login-control m-b-20" placeholder="Email Address" th:placeholder="邮箱地址">

        <button class="btn btn-sm m-r-5" th:text="重置密码">Reset Password</button>

        <small><a class="box-switcher" data-switch="box-login" href="" th:text="已有账户">Already have an Account?</a>
        </small>
    </form>

    <a class="btn btn-sm" th:href="@{login.html(l='zh_CN')}">中文</a>
    <a class="btn btn-sm" th:href="@{login.html(l='en_US')}">English</a>
</section>

<!-- Javascript Libraries -->
<!-- jQuery -->
<script src="/static/js/jquery.min.js" th:src="@{/webjars/jquery/3.3.1-1/jquery.js}"></script> <!-- jQuery Library -->

<!-- Bootstrap -->
<script src="/static/js/bootstrap.min.js" th:src="@{/webjars/bootstrap/4.1.3/js/bootstrap.js}"></script>

<!--  Form Related -->
<script src="/static/js/icheck.js" th:src="@{/js/icheck.js}"></script> <!-- Custom Checkbox + Radio -->

<!-- All JS functions -->
<script src="/static/js/functions.js" th:src="@{/js/icheck.js}"></script>
</body>
</html>
